一句話介紹 ⇒ 不會跟canvas 上的物件互動，但會被渲染在輸出圖片裡

Canvas 的圖面渲染，其實可以分為三層：

• Canvas 本體
• 前景圖（Overlay Image）
• 背景圖（Background Image）

概念

除了canvas 本體之外，其他兩個都是跟著canvas 本體的虛擬層
（概念上像 css 的 ::before 跟 ::after）

與 Canvas 本體 的關係

• 他像背景色 canvas.backgroundColor 一樣，都是從屬於 canvas 這個物件之下的屬性
• 不參與主 canvas 的對象選擇和交互 ⇛ 白話就是你不管在 canvas 上加了多少物件、多少圖形都動不到前景背景，背景圖會在最底層、前景圖會在最上層。
• 但你輸出的時候他也會一併被輸出

特點

• 可以設置縮放、位移和旋轉。
• 前景圖或背景圖在每個 canvas 都各只有一層，可以同時都有設定圖像（沒有設定的話，前景圖或背景圖就是空值 null）

跟 canvas 本體差別總結

1. 交互性：主 canvas 支持完全的交互，而背景圖和前景圖基本上是靜態的。
2. 操作靈活性：主 canvas 上的對象可以自由操作，而背景圖和前景圖的操作有限。
3. 渲染順序：背景圖 → 主 canvas 內容 → 前景圖。
4. 用途：背景圖用於設置整體背景，前景圖用於添加全局覆蓋元素，主 canvas 用於所有主要的繪圖和交互操作。
5. 設置方法：背景圖和前景圖通過特定方法設置，主 canvas 的內容通過添加對象來構建。

背景圖（Background Image）：

物件屬性為 canvas.backgroundImage

• 可以通過 canvas.setBackgroundImage() 方法設置。
• 位於所有其他元素的最底層，始終顯示在所有其他 canvas 元素之下。

用意：

• 為整個畫布提供基礎層或底層圖像。
• 通常用於設置場景、環境或整體氛圍。

前景圖（Overlay Image）：

物件屬性為 canvas.overlayImage

• 可以通過 canvas.setOverlayImage() 方法設置。
• 位於所有其他元素的最頂層，始終顯示在所有其他 canvas 元素之上。

用意：

• 為整個畫布提供最上層的覆蓋圖像。
• 通常用於添加水印、裝飾元素或全局效果。